<template>
  <view class="container">
    <view class="row">
      <view class="left">身份：</view>
      <view class="right-flex">
        <picker @change="changeType" :value="typeIndex" :range="type_list">
          <view>{{ type_list[typeIndex] }}</view>
        </picker>
        <image class="icon" src="../../static/images/bottom.png"></image>
      </view>
    </view>

    <view class="row">
      <view class="left">相关证件：</view>
      <view class="right">{{ typeIndex == 0 ? '营业执照' : (typeIndex == 1 ? '机构代码证' : '社会组织登记证') }}</view>
    </view>
    <view class="row" style="align-items: flex-start">
      <view class="left"></view>
      <view class="right" style="flex-direction: column">
        <view class="upload-box" @click="upImg" v-if="!img">
          <image class="upload-img" src="/static/images/upload.png"></image>
        </view>
        <image class="img" :src="img_path" @click="upImg" mode="aspectFill" v-else></image>
      </view>
    </view>

    <view class="row">
      <view class="left">负责人姓名：</view>
      <input type="text" class="input" @input="changeUsername" :value="username" placeholder="请输入负责人姓名">
    </view>
    <view class="row">
      <view class="left">手机号：</view>
      <input type="number" class="input" @input="changeMobile" :value="mobile" placeholder="请输入手机号">
    </view>
    <view class="row">
      <text class="left">单位名称：\n（全称）</text>
      <input type="text" class="input" @input="changeCompanyName" :value="company_name" placeholder="请输入单位名称（全称）">
    </view>

    <view class="btn" @click="submit">立即提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type_list: ['民企', '机关单位', '社会组织'],
      typeIndex: 0,
      img: 0,
      img_path: '',
      username: '',
      company_name: '',
      mobile: '',
    };
  },

  onLoad: function (options) {

  },

  methods: {
    changeType: function (e) {
      this.typeIndex = e.detail.value;
    },

    changeUsername: function (e) {
      this.username = e.detail.value;
    },
    changeCompanyName: function (e) {
      this.company_name = e.detail.value;
    },
    changeMobile: function (e) {
      this.mobile = e.detail.value;
    },

    upImg: function () {
      this.$common.uploadImg(res => {
        var {id, path} = res;
        if (id) {
          this.img = id;
          this.img_path = path;

          uni.showToast({
            title: '上传成功'
          })
        } else {
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
      })
    },

    submit: function () {
      var user_id = uni.getStorageSync('user_id'),
        type = parseInt(this.typeIndex) + 1,
        img = this.img,
        username = this.username,
        mobile = this.mobile,
        company_name = this.company_name,
        timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）,

      uni.showLoading({
        title: '提交中...',
        mask: true
      })

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        this.$http.post('/index/Api/companyProve', {user_id, username, mobile, type, img, company_name}).then(res => {
          uni.removeStorageSync('timestamp');
          uni.hideLoading();

          if (res.data.result == 1) {
            uni.showToast({
              title: res.data.msg
            })

            uni.setStorageSync('company_prove_id', res.data.data);

            uni.reLaunch({
              url: '/pages/index/index'
            })
          } else {
            this.$common.doErrorResult(res);
          }
        })
      }
    },
  },
}
</script>

<style lang="scss">
page{
  background: #fff;
}
.container {
  padding: 20rpx;

  .row {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    margin-top: 20rpx;

    .right-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1rpx solid #f5f5f5;
      padding: 20rpx;
      border-radius: 20rpx;
      flex: 1;

      picker {
        color: #8C8888;
        width: 100%;
      }

      .icon {
        width: 20rpx;
        height: 20rpx;
      }

      .textarea {
        width: calc(100% - 40rpx);
      }
    }

    .left {
      width: 200rpx;
      font-size: 32rpx;
      text-align: right;
    }

    .input {
      flex: 1;
      border: 1rpx solid #f5f5f5;
      border-radius: 10rpx;
      padding: 10rpx 20rpx;
    }

    .small {
      font-size: 28rpx;
      color: #3D3D3D;
    }

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #8C8888;

      .edit {
        width: 30rpx;
        height: 30rpx;
      }

      .img {
        width: 404rpx;
        height: 244rpx;
      }
    }

    .text {
      color: #3D3D3D;
    }
  }

  .btn {
    position: absolute;
    font-size: 24rpx;
    color: #fff;
    background: #32a4ff;
    width: calc(100% - 80rpx);
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 24rpx;
    border-radius: 50rpx;
    text-align: center;
    bottom: 100rpx;
    left: 20rpx;
  }

}
</style>

